<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>示例网页</title>
</head>

<body>
    <div id="app">
        <!-- 1.2插值表达式 -->
        <p>{{title}}</p>
        <p>{{content}}</p>
        <p>{{1 + 2 + 3}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <!-- 2.1计算属性是属性，调用的时候没括号 -->
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p>
        <!-- 4. 指令 -->
        <!-- html和text都会覆盖原始内容 -->
        <!-- 内容指令 -->
        <p v-text="title">a</p>
        <p v-text="content">aaaaaaaa</p>
        <p v-html="htmlContent">aaaa</p>

        <p v-for="item in 5">v-for</p>
        <p v-for="item in arr">{{item}}</p>
        <p v-for="(item,key,index) in arr">{{item}},{{key}},{{index}}</p>

        <!-- 渲染指令 -->
        <!-- if会销毁元素，show不会 -->
        <p v-if="bool">标签内容</p>
        <p v-show="bool">标签内容</p>

        <!-- 属性指令 -->
        <p title="标题标题，鼠标飞一下">这是内容</p>
        <p v-bind:title="title">啦啦啦</p>
        <p :title="title">简写形式</p>

        <!-- 事件指令 -->
        <button v-on:click="output">按钮</button>
        <button @click="output">简单写法:@</button>

        <!-- 表单指令：v-model可以实现双向数据绑定 只能用在表单-->
         <input type="text" v-model="inputValue">
         <p v-text="inputValue"></p>

         <!-- 5.修饰符 简化代码和dom操作-->
        <input type="text" v-model.trim="inputValue">
    </div>

    <script src="vue.js"></script>
    <script>
        const value = "这是内容";
        const vm = new Vue({
            //1.响应式数据与插值表达式
            el: '#app',
            data() {
                return {
                    title: '这是aaaa标题',
                    content: 'zheshiwenben',
                    htmlContent: "这是一个<span>a</span>",
                    arr: ['a', 'b', 'c'],
                    bool: false,
                    inputValue:'默认内容'
                }
            },
            //1.3 methods 属性
            methods: {
                output() {
                    console.log('11111111');
                    return '标题为：' + this.title + 'context is :' + this.content;
                }
            },
            //2.计算属性:具有缓存性
            computed: {
                outputContent() {
                    console.log('aaa');
                    return '标题为：' + this.title + 'context is :' + this.content;
                }
            },
            // 3.侦听器:修改响应式数据
            watch: {
                // title是方法名
                title(newValue, oldValue) {
                    console.log(newValue, oldValue);
                }
            },
        })
    </script>
</body>

</html>